import Vue from 'vue'

//二级组件
const component = {
  // 定义一个组件的时候，配置组件的行为,
  // 定义类型

  // 定义prop方法一
  // props: {
  //   active: Boolean,
  //   propOne: String
  // },

  //定义props 方法二
  // props: ['active', 'propOne'],

  //定义props 方法三
  props: {
    active: {
      // type: Boolean,
      //require: true,
      validator(value){
        return typeof value === 'boolean'
      }
    },
    propOne: String
  },

  template: `
    <div>
      <input type="text" v-model="text"/>
      <span @click="handleChange">{{propOne}}</span>
      <!-- 在特定情况下会显示 see me if active -->
      <span v-show="active">see me if active</span>
    </div>
  `,
  //用方法的方法来传入数据
  data() {
    //return 会新建一个对象
    return {
      text: 'this is component'
    }
  },
  methods: {
    handleChange(){
      this.$emit('change')
    }
  }
}


const data = {
  text: 0
}

// 第一种方法定义组件
// 定义了一个component组件
// 组件全局可见
//Vue.component('CompOne', component)

//最外层组件
new Vue({

  //第二种方法定义组件
  components: {
    //注册到全局的组件
    CompOne: component
  },
  data: {
    prop1: 'text1'
  },
  methods: {
    handleChange() {
      this.prop1 += 1
    }
  },
  el: '#root',
  template: `
    <div>
      <!--<comp-one :active="true" :prop-one="prop1" @change="handleChange"></comp-one>-->
      <!--<comp-one :active="false" propOne="text2"></comp-one>-->
      <comp-one :active="true" :prop-one="prop1" @change="handleChange"></comp-one>
    </div>
  `
})
